<template>
  <view class="fixed_bottom">
    <!-- 底部操作栏只有按钮 -->
    <template v-if="onlyBtn">
      <view class="btn_box">
        <slot name="btn-box">
          <button
            v-for="(btn, index) in btnList"
            :key="index"
            class="button"
            :style="[getBtnStyle(btn, index)]"
            @click="handleClick(btn.emit, index)"
          >
            <image v-if="btn.src" class="btn_icon" :src="btn.src" />
            {{ btn.name }}
          </button>
        </slot>
      </view>
    </template>
    <!-- 底部操作栏有文本展示 -->
    <template v-else>
      <slot name="left-box">
        <view class="left-wrap">
          <slot name="left-content">
            {{ info.label }}：
            <text class="left_num">{{ info.value }}</text>
          </slot>
        </view>
      </slot>
      <slot name="right-box">
        <button
          :class="[greyBtn? 'sticky-btn btn-orange': 'sticky-btn btn-orange btn-grey']"
          :plain="true"
          @click="handleClick('click')"
        >
          {{ btnName }}
        </button>
      </slot>
    </template>
  </view>
</template>
<script>
export default {
  props: {
    // 只有按钮
    onlyBtn: {
      type: Boolean,
      default: false
    },
    // 按钮集合（onlyBtn为true时可使用）
    btnList: {
      type: Array,
      default: () => []
    },
    // 第二个按钮距离第一个按钮的左间距，默认16（onlyBtn为true时可使用）
    marginLeft: {
      type: Number,
      default: 16
    },
    // 信息内容（onlyBtn为false时可使用）
    info: {
      type: Object,
      default: () => ({ label: '', value: '' })
    },
    // 按钮名称（onlyBtn为false时可使用）
    btnName: {
      type: String,
      default: ''
    },
    // 按钮名称（onlyBtn为false时可使用）
    greyBtn:{
      type: Boolean,
      default: true
    }
  },
  computed: {
    hasOneBtn() {
      return this.btnList.length == 1
    },
    defaultBtnWidth() {
      // if (this.hasOneBtn) return 624
      // return 314
      const { windowWidth } = this.vuex_systemInfo[1]
      const rate = Math.floor(750 / 320)
      const realWidth = windowWidth * rate
      if (this.hasOneBtn) return realWidth - 80
      const btnWidth = (realWidth - this.marginLeft - 80) / 2
      return btnWidth
    },
  },
  methods: {
    handleClick(emit, index) {
      const emitName = emit ?? (this.hasOneBtn ? 'click' : `${index == 0 ? 'cancel' : 'confirm'}`)
      this.$u.throttle(() => {
        this.$emit(emitName)
      }, 500)
    },
    // 获取按钮样式
    getBtnStyle(btnProps, index) {
      const { height, fontSize, lineHeight } = btnProps ?? {}
      const { backgroundColor, color, marginLeft } = index == 0 ? this.getFirstBtnDefaultProps(btnProps) : this.getSecondBtnDefaulProps(btnProps)
      const style = {
        width: this.defaultBtnWidth + 'rpx',
        height: (height ?? 68) + 'rpx',
        lineHeight: (lineHeight ?? height ?? 68) + 'rpx',
        backgroundColor: backgroundColor,
        color: color,
        fontSize: (fontSize ?? 28) + 'rpx',
      }
      if (marginLeft) {
        style.marginLeft = marginLeft
      }
      if (btnProps?.background || btnProps.isLinearBg) {
        style.background = 'linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%)'
      }
      return style
    },
    // 获取第一个按钮的按钮属性
    getFirstBtnDefaultProps(btnProps) {
      const backgroundColor = btnProps?.backgroundColor ?? (this.hasOneBtn ? '#FF5533' : '#FFFFFF')
      const color = btnProps?.color ?? (this.hasOneBtn ? '#FFFFFF' : '#333333')
      return {
        backgroundColor,
        color
      }
    },
    // 获取第二个按钮的按钮属性
    getSecondBtnDefaulProps(btnProps) {
      const backgroundColor = btnProps?.backgroundColor ?? '#FF5533'
      const color = btnProps?.color ?? '#FFFFFF'
      const marginLeft = this.marginLeft + 'rpx'
      return {
        backgroundColor,
        color,
        marginLeft
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fixed_bottom{
  position: fixed;
  height: 88rpx;
  line-height: 80rpx;
  width:calc(100% - 80rpx);
  padding: 0 40rpx 70rpx;
  bottom:0;
  text-align: right;
  background: $uni-bg-color;
  z-index: 100;
  .left-wrap{
    float: left;
    color: $uni-grey-666;
    font-size: $uni-font-size-sm;
    .left_num{
      font-size: 32rpx;
      font-weight: bold;
      color: $uni-orange;
    }
  }
  .sticky-btn{
    float: right;
    margin:14rpx 0 0 58rpx;
  }
  .btn-orange {
    width: 160rpx;
    height: 56rpx;
    padding: 0!important;
    line-height: 56rpx;
  }
  .btn-grey{
    border-color: #efefef;
    background: #efefef;
    color: #999;
  }    
}
.button {
  border-radius: 8rpx;
}
.btn_box {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
  .btn_icon {
    width: 32rpx;
    height: 32rpx;
    position: relative;
    top: 6rpx;
    margin-right: 8rpx;
  }
}
</style>
